/*
 * @Author: zhangweixin 
 * @Date: 2018-11-14 09:50:03 
 * @Last Modified by: zhangweixin
 * @Last Modified time: 2018-11-29 15:51:44
 */
import React, {Component} from 'react';
import {increment, decrement, reset} from 'actions/countActions';

import {connect} from 'react-redux';
import Template from './template.jsx';

class Counter extends Component{
  constructor(props){
    super(props);
    this.state={
      count:0
    }
    // 如果不这样bind 一下this；
    // 在页面就要用 onClick={() => this._handleClick()}这种形式了
    this._handleClick = this._handleClick.bind(this);
    this._handleDescClick = this._handleDescClick.bind(this);
    this.render = Template;
  }
  _handleClick() {
    this.props.increment();
    // this.setState({
    //     count: ++this.state.count
    // });
  }
  _handleDescClick() {
    this.props.decrement();
    // this.setState({
    //     count: ++this.state.count
    // });
  }
  render(){
    return(
      <div className={style["P-counter"]}>
        当前计数{this.props.counter.count}
        <button onClick={this._handleClick}>add</button>
        <button onClick={this._handleDescClick}>desc</button>
      </div>
    )
  }
}
const mapStateToProps = (state) => {
  return {
      counter: state.counter
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
      increment: () => {
          dispatch(increment())
      },
      decrement: () => {
          dispatch(decrement())
      },
      reset: () => {
          dispatch(reset())
      }
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);